@font-face {
	font-family: QNAPCustomFont;
	src: local(Lucida Grande), local(Verdana), local(Tahoma), local(Arial),
		local(Helvetica), local(sans-serif);
}

@font-face {
	font-family: QNAPCustomFont2;
	src: local(Arial), local(Helvetica), local(sans-serif);
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
	{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-family: QNAPCustomFont, 'Lucida Grande', 'Verdana', 'Tahoma',
		'Arial', 'Helvetica', 'sans-serif';
	vertical-align: baseline;
}

button,input {
	font-family: QNAPCustomFont, 'Lucida Grande', 'Verdana', 'Tahoma',
		'Arial', 'Helvetica', 'sans-serif';
}

input:focus {
	outline: none;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
	{
	display: block;
}

html,body {
	width: 100%;
	height: 100%;
	position: absolute;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	font-family: QNAPCustomFont, 'Lucida Grande', 'Verdana', 'Tahoma',
		'Arial', 'Helvetica', 'sans-serif';
	-webkit-transition: background-color .5s, background-image .5s;
	-moz-transition: background-color .5s, background-image .5s;
	-ms-transition: background-color .5s, background-image .5s;
	-o-transition: background-color .5s, background-image .5s;
	transition: background-color .5s, background-image .5s;
	background-image: -webkit-gradient(radial, 50% 350, 0, 50% 350, 114, color-stop(0%,
		#99C9E6), color-stop(29%, #60C3E2), color-stop(60%, #208EB9),
		color-stop(100%, #1B8ABE) );
	background-image: -webkit-radial-gradient(center center, 50% 105.41%, #99C9E6 0, #60C3E2
		29%, #208EB9 60%, #1B8ABE 100%);
	background-image: -moz-radial-gradient(center center, 50% 105.41%, #99C9E6 0, #60C3E2 29%,
		#208EB9 60%, #1B8ABE 100%);
	background-image: -ms-radial-gradient(center center, 50% 105.41%, #99C9E6 0, #60C3E2 29%,
		#208EB9 60%, #1B8ABE 100%);
	background-image: -o-radial-gradient(center center, 50% 105.41%, #99C9E6 0, #60C3E2 29%,
		#208EB9 60%, #1B8ABE 100%);
	background-image: radial-gradient(50% 105.41% at center center, #99C9E6 0, #60C3E2 29%,
		#208EB9 60%, #1B8ABE 100%);
}

body {
	background-color: transparent;
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	visibility: hidden;
}

.login-form .x-panel-body {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.x-abs-layout-item {
	position: absolute;
	left: 0;
	top: 0;
}

.none-bg-btn .x-btn-tl,.none-bg-btn .x-btn-tr,.none-bg-btn .x-btn-tc,.none-bg-btn .x-btn-ml,.none-bg-btn .x-btn-mr,.none-bg-btn .x-btn-mc,.none-bg-btn .x-btn-bl,.none-bg-btn .x-btn-br,.none-bg-btn .x-btn-bc,.largeTabBtn .x-btn-tl,.largeTabBtn .x-btn-tr,.largeTabBtn .x-btn-tc,.largeTabBtn .x-btn-bl,.largeTabBtn .x-btn-br,.largeTabBtn .x-btn-bc
	{
	height: 0;
	width: 0;
	background-image: none;
}

.x-hide-display {
	display: none !important;
}

.x-btn td {
	padding: 0 !important;
	vertical-align: bottom;
}

.x-btn button {
	border: 0 none;
	background-color: transparent;
	padding-left: 3px;
	padding-right: 3px;
	cursor: pointer;
	margin: 0;
	overflow: visible;
	width: auto;
	-moz-outline: 0 none;
	outline: 0 none;
}

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td
	{
	margin: 0;
	padding: 0;
}

.x-btn-tc {
	height: 3px;
	background: repeat-x 0 -6px;
}

.x-btn {
	cursor: pointer;
	white-space: nowrap;
}

.x-btn-tr i,.x-btn-tl i,.x-btn-mr i,.x-btn-ml i,.x-btn-br i,.x-btn-bl i
	{
	font-size: 1px;
	line-height: 1px;
	width: 3px;
	display: block;
	overflow: hidden;
}

.x-btn-ml {
	width: 3px;
	background: no-repeat 0 -24px;
}

input:focus {
	outline-color: transparent;
}

.mask-msg {
	color: rgba(255, 255, 255, 0.75);
	cursor: text;
}

.preview .logo,.loginUI .logo {
	background: url(../../images/login/logo_login.png) no-repeat;
	width: 257px;
	height: 40px;
	position: relative;
	top: 57px;
	left: 44px;
	padding-left: 215px;
	font-size: 30px;
	letter-spacing: -4px;
	color: #343434;
	font-family: Verdana;
	padding-top: 2px;
}

.qnap-adCt {
	background: #6d7577;
	box-shadow: 0 0 0 #808080, 0 0 0 2px #FFF, 0 0 8px 4px #6d7577;
	margin-top: -140px;
	position: relative;
	text-align: center;
	-webkit-transition: margin .5s;
	-moz-transition: margin .5s;
	-ms-transition: margin .5s;
	-o-transition: margin .5s;
	transition: margin .5s;
}

.s-adCt .qnap-adCt .btn-wrap {
	position: absolute;
	z-index: 100;
	left: 0;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	box-shadow: -2px 0 3px rgba(0, 0, 0, 0.1);
}

.qnap-adCt .display-box {
	width: 996px;
	height: 100%;
	text-align: left;
	white-space: nowrap;
	display: inline-block;
	overflow: hidden;
	padding: 0 2px;
	visibility: hidden;
	position: relative;
}

.show-ad .qnap-adCt .display-box {
	visibility: visible;
}

.x-clear {
	clear: both;
	height: 0;
	overflow: hidden;
	line-height: 0;
	font-size: 0;
}

.qnap-adCt .thumb-wrap {
	display: inline-block;
	margin-top: 9px;
	margin-right: 27px;
	cursor: pointer;
	width: 314px;
	height: 120px;
	background: #a8a8a8;
	position: relative;
	-webkit-transition: left .5s;
	-moz-transition: left .5s;
	-ms-transition: left .5s;
	-o-transition: left .5s;
	transition: left .5s;
}

.qnap-adCt .thumb-wrap img {
	width: 314px;
	height: 118px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}

.qnap-adCt .tab {
	z-index: 100;
	right: 164px;
	display: inline-block;
	color: #012935;
	position: absolute;
	bottom: -44px;
	cursor: pointer;
	box-shadow: 0 2px 8px #000;
}

.qnap-adCt .tab-l,.qnap-adCt .tab-m,.qnap-adCt .tab-r {
	background-image: url(/cgi-bin/images/login/btn.png);
	height: 42px;
}

.qnap-adCt .tab-l {
	padding-left: 15px;
	background-repeat: no-repeat;
}

.qnap-adCt .tab-r {
	padding-right: 15px;
	background-position: right -84px;
	background-repeat: no-repeat;
}

.qnap-adCt .tab-m {
	background-position: 0 -42px;
	font-weight: bold;
	line-height: 42px;
	font-size: 12px;
}

.qnap-adCt .ad-arrow {
	cursor: pointer;
	width: 17px;
	height: 17px;
	background-image: url(/cgi-bin/images/login/icon.png);
	display: inline-block;
	margin: 12px 0 13px 7px;
	vertical-align: text-bottom;
	margin-bottom: -2px;
	margin-left: 7px;
}

.qnap-adCt .tab:hover .ad-arrow {
	background-position: 0 -34px;
}

.show-ad .qnap-adCt .tab:hover .ad-arrow {
	background-position: 0 -51px;
}

.show-ad .qnap-adCt {
	visibility: visible;
	margin-top: 0;
}

.show-ad .qnap-adCt .tab:hover .ad-arrow {
	background-position: 0 -51px;
}

.show-ad .qnap-adCt .ad-arrow {
	background-position: 0 -17px;
}

.show-ad .qnap-adCt .btn-wrap {
	display: inline-block;
}

.qnap-adCt .btn-wrap {
	width: 100px;
	height: 120px;
	display: inline-block;
	position: relative;
	cursor: pointer;
}

.qnap-adCt .btn {
	background-image: url(/cgi-bin/images/login/move.png);
	width: 19px;
	height: 30px;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.qnap-adCt .btn-r {
	background-position: 0 0;
}

.qnap-adCt .btn-wrap:hover .btn-r {
	background-position: 0 -60px;
}

.qnap-adCt .btn-l {
	background-position: 0 -30px;
}

.photo-station-quick-list {
	padding: 30px 0;
	bottom: 0;
	margin: auto;
	right: 20px;
	display: none;
}

.show-photo-station-quick-list {
	display: block;
}

.photo-station-quick-list .btn-wrap {
	z-index: 10;
	cursor: pointer;
	height: 20px;
	width: 80px;
	padding: 4px 0 4px 18px;
	border-radius: 3px;
	border: 1px solid transparent;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.photo-station-quick-list .btn-t {
	top: 0;
}

.photo-station-quick-list .btn-b {
	bottom: 3px;
}

.photo-station-quick-list .btn {
	background: url('/cgi-bin/images/login/photo_arrow.png') no-repeat;
	width: 70px;
	height: 24px;
	display: block;
	margin: auto;
}

.photo-station-quick-list .arrow_photo_1 {
	background-position: 0 0;
}

.photo-station-quick-list .arrow_photo_2 {
	background-position: 0 -24px;
}

.photo-station-quick-list .view {
	position: relative;
	top: 0;
	bottom: 0;
	overflow: hidden;
	height: 100%;
}

.photo-station-quick-list .display-box {
	position: relative;
	top: 0;
	bottom: 30px;
	overflow: hidden;
}

.photo-station-quick-list .thumb-wrap {
	padding: 3px 0;
	text-align: center;
	position: relative;
	list-style-type: none;
}

.photo-station-quick-list .thumb {
	border: 1px solid #111;
	box-shadow: inset 0 2px 0 -1px hsla(0, 0%, 100%, .2), inset 0 50px 50px
		-30px rgba(207, 207, 207, .6), inset 0 150px 150px -30px
		hsla(0, 0%, 100%, .3), inset 0 0 5px rgba(228, 149, 149, .6), inset 0
		0 0 9px #d1cece, 0 0 5px 1px rgba(235, 235, 235, .3), 0 6px 6px -3px
		hsla(0, 0%, 77%, .3);
	padding: 2px;
	display: inline-block;
}

.photo-station-quick-list .photo {
	max-height: 120px;
	max-width: 120px;
	background: #a6a6a6;
	vertical-align: bottom;
}

.s-adCt .qnap-adCt .btn-wrap {
	position: absolute;
	z-index: 100;
	left: 0;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	box-shadow: -2px 0 3px rgba(0, 0, 0, 0.1);
}

.s-adCt .qnap-adCt .display-box+.btn-wrap {
	right: 0;
	left: auto;
	top: 0;
}

.login-failed {
	animation: login-failed-amin .5s linear alternate;
	-webkit-animation: login-failed-amin .5s linear alternate;
}

@
keyframes login-failed-amin { 0%{
	left: 0;
}

20%{
left
:
-25px;
}
40%{
left
:
30px;
}
45%{
left
:
25px;
}
60%{
left
:
-30px;
}
65%{
left
:
-25px;
}
80%{
left
:
30px;
}
95%{
left
:
0;
}
100%{
left
:
0;
}
}
@
-webkit-keyframes login-failed-amin { 0%{
	left: 0;
}
20%{
left
:
-25px;
}
40%{
left
:
30px;
}
45%{
left
:
25px;
}
60%{
left
:
-30px;
}
65%{
left
:
-25px;
}
80%{
left
:
30px;
}
95%{
left
:
0;
}
100%{
left
:
0;
}
}